<template>
	<view class="pay">
		<view class="header">
			<view class="jt"  @tap="go">
				<text><</text>
				<text class="le">乐居</text>
			</view>	
		</view>
		
		
		<view class="content">
			<view class="wait">
				<text>等待支付</text>
			</view>
			
			<view class="address"  @tap="address">
				<text>{{name}}</text>
				<text>{{tel}}</text><br>
				<text>{{cityBak}}</text>
			</view>
			
			<view class="box">
				<text class="order">订单编号:</text>
				<text class="money">等待支付</text>
				
				<view class="line1">
					
				</view>
				
				
				<view class="dd">
					<image :src="img" mode=""></image>
					<text class="gname">{{gname}}</text>
					<text class="hao">编号:</text><br>
					<text class="gui">规格:</text>
					
				</view>
				
				
				
				
				
				
				
				
				<view class="line2">
					
				</view>
				
				<text class="total">合计:{{}}</text>
				
				<view class="sure" @tap="sure">
					<text>确认付款</text>
				</view>
			</view>
			
			
			
			
		</view>
		
	</view>
</template>

<script>
	import { detail } from "../../../util/goods/index.js"
	export default {
		data() {
			return {
				id:'',
				name:'',
				tel:'',
				cityBak:'',
				img:'',
				gname:'',
				list:''
			};
		},
		onLoad(option) {
			const val = JSON.parse(decodeURIComponent(option.id));
			console.log(val)
			
			const item = JSON.parse(decodeURIComponent(option.id));
			console.log(item)
			this.name=item.name
			this.tel=item.tel
			this.cityBak=item.cityBak
			
			try {
			    uni.setStorageSync('key', this.list);
			} catch (e) {
			    // error
			}
			
			
			
			detail({
				productId:this.id	
			}).then(res=>{
				console.log(res)
				// this.list=res.data.data;
				// this.box = res.data.data.list
				
				// this.sku = res.data.data.skuList
				
				
			})
		},
		onShow(){
			try {
			    const value = uni.getStorageSync('key');
			    if (value) {
			        console.log(value);
					this.list=value
					this.img=value.cover_img
					this.gname=value.gname
			    }
			} catch (e) {
			    // error
			}
		},
		
		
		methods:{
			go(){
				uni.navigateBack({
					delta:0
				})
			},
			address(){
				
				uni.navigateTo({
					url:"../address/address"
				})
				
			},
			
			sure(){
				uni.showModal({
					title:"付款提示",
					content:"是否决定要付款",
					duration:2000,
					success: function (res) {
					        if (res.confirm) {
					            console.log('用户点击确定');
					        } else if (res.cancel) {
					            console.log('用户点击取消');
					        }
					    }
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.dd{
		margin-left: 30px;
		image{
			width: 80px;
			height: 80px;
			margin-left: 20px;
			margin-top: 20px;
		}
		
	}
	.hao{
		position: absolute;
		left: 180px;
		top: 340px;
		color: #8c8c8c;
		font-size: 14px;
	}
	.gui{
		position: absolute;
		left: 180px;
		top: 360px;
		color: #8c8c8c;
		font-size: 14px;
	}
	.gname{
		position: absolute;
		top: 310px;
		left: 180px;
		
	}
  .pay{
  	padding-top: var(--status-bar-height);
  }
  .header{
  	width: 100%;
  	height: 60px;
  	background-color: #354e44;
  	overflow: hidden;
  }
  .jt{
  	font-size: 28px;
  	color: #fff;
  	margin-top: 10px;
  }
  .jt .le{
	  font-size: 16px;
	  font-weight: 600;
	  margin-left: 150px;
  }
  
  .content{
	  width: 100%;
	  height: 620px;
	  overflow: hidden;
	 background-color:#f1ece7 ;
  }
  
  .wait{
	  margin-left: 30px;
	  font-size: 18px;
	  margin-top: 30px;
  }
  
  .address{
	  margin-left: 30px;
	  margin-top: 30px;
	  width: 300px;
	  height: 50px;
	  background-color: #f5f5f5;
	  border-radius: 30px;
	  text{
		  margin-left: 30px;
	  }
  }
  
  .box{
	  width: 320px;
	  height: 300px;
	  background-color: #fff;
	  border-radius: 20px;
	  margin-left: 25px;
	  margin-top: 30px;
	  overflow:hidden;
  }
  
  .order{
	  margin-left: 30px;
	  position: relative;
	  top: 20px;
  }
  
  .money{
	  margin-right: 30px;
	 position: relative;
	 top: 20px;
	 left: 130px;
  }
  
  .line1{
	  width: 250px;
	  height: 1px;
	  background-color: #C0C0C0;
	  margin-left: 30px;
	  margin-top: 40px;
  }
  
  .line2{
	  width: 250px;
	  height: 0.5px;
	  background-color: #C0C0C0;
	  margin-left: 30px;
	  margin-top: 50px;
  }
  .sure{
	  width: 80px;
	  height: 30px;
	  background-color:#354e44 ;
	  margin-left: 200px;
	  margin-top: 20px;
	  text{
		  color: #fff;
		  margin-left: 10px;
		  
	  }
}
.total{
	margin-left: 210px;
	position: relative;
	top: 10px;
}
</style>
